import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';
import store from './store';
import { changeInputValueAction , deleteItemAction , clickChangeAction, getListAction} from './store/actionCreators';
import axios from 'axios';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState()
    this.changeInputValue = this.changeInputValue.bind(this)
    this.storeChange = this.storeChange.bind(this)
    this.clickChange = this.clickChange.bind(this)
    store.subscribe(this.storeChange)
  }
  render() { 
    return ( 
      <div>
        <div style={{margin:'10px'}}>
          <Input 
            placeholder={this.state.inputValue} 
            style={{width:'250px',marginRight:'10px'}} 
            onChange={this.changeInputValue}
          />
          <Button 
            type='primary'
            onClick = {this.clickChange}
          >增加</Button>
        </div>
        <div style={{margin:'10px',width:'300px'}}>
          <List 
            bordered
            dataSource = {this.state.list}
            renderItem = {(item,index)=>(<List.Item onClick = {this.deleteItem.bind(this,index)} >{item}</List.Item>)}
          />
        </div>
      </div>
     );
  }

  componentDidMount(){
    axios.get('https://www.easy-mock.com/mock/5d48d7afa1327563cb737e64/redux/getList').then((res)=>{
      const data = res.data
      const action = getListAction(data)
      store.dispatch(action)
    })
  }

  changeInputValue(e){
    const action = changeInputValueAction(e.target.value)
    store.dispatch(action)
  }

  storeChange(){
    this.setState(store.getState())
  }

  clickChange(){
    const action = clickChangeAction()
    store.dispatch(action)
  }
  deleteItem(index){
    const action = deleteItemAction(index)
    store.dispatch(action)
  }
}
 
export default TodoList;